<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div v-permission="'/blog/getList'" class="filter-container" style="margin: 10px 0 10px 0;">

      <el-form v-show="showSearch" :inline="true" label-width="68px" style="margin-bottom: 8px;">
        <el-input
          v-model="queryParams.keyword"
          clearable
          class="filter-item"
          style="width: 150px;"
          placeholder="请输入博客名"
          @keyup.enter.native="handleFind"
        />

        <el-select
          v-model="queryParams.sortKeyword"
          :remote-method="sortRemoteMethod"
          :loading="loading"
          style="width: 140px"
          filterable
          clearable
          remote
          reserve-keyword
          placeholder="请输入分类名"
          @keyup.enter.native="handleFind"
        >
          <el-option
            v-for="item in sortOptions"
            :key="item.uid"
            :label="item.sortName"
            :value="item.uid"
          />
        </el-select>

        <el-select
          v-model="queryParams.tagKeyword"
          :remote-method="tagRemoteMethod"
          :loading="loading"
          filterable
          clearable
          remote
          reserve-keyword
          placeholder="请输入标签名"
          style="width:140px"
          @keyup.enter.native="handleFind"
        >
          <el-option
            v-for="item in tagOptions"
            :key="item.uid"
            :label="item.content"
            :value="item.uid"
          />
        </el-select>

        <el-select v-model="queryParams.levelKeyword" clearable placeholder="推荐等级" style="width:110px">
          <el-option
            v-for="item in blogLevelDictList"
            :key="item.uid"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>

        <el-select v-model="queryParams.publishKeyword" clearable placeholder="是否发布" style="width:110px">
          <el-option
            v-for="item in blogPublishDictList"
            :key="item.uid"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>

        <el-select v-model="queryParams.originalKeyword" clearable placeholder="是否原创" style="width:110px">
          <el-option
            v-for="item in blogOriginalDictList"
            :key="item.uid"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>

        <el-select v-model="queryParams.typeKeyword" clearable placeholder="文章类型" style="width:110px">
          <el-option
            v-for="item in blogTypeDictList"
            :key="item.uid"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>

        <el-button v-permission="'/blog/getList'" style="margin-left: 10px;" class="filter-item" type="primary" icon="el-icon-search" @click="handleFind">查找</el-button>

      </el-form>

      <el-row :gutter="10" style="margin-bottom: 8px;">
        <el-col :span="1.5">
          <el-button v-permission="'/blog/add'" class="filter-item" type="primary" icon="el-icon-edit" @click="handleAdd">添加博客</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button v-permission="'/blog/editBatch'" class="filter-item" type="warning" icon="el-icon-s-flag" @click="handleSyncWpUp">批量分类</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button v-permission="'/blog/uploadWordpressBlog'" class="filter-item" type="info" icon="el-icon-top" @click="handleUpWp">更新到Wordpress</el-button>
        </el-col>

        <el-col :span="1.5">
          <el-button v-permission="'/blog/deleteBatch'" class="filter-item" type="danger" icon="el-icon-delete" @click="handleDeleteBatch">删除选中</el-button>
        </el-col>

        <right-toolbar :show-search.sync="showSearch" @queryTable="resetBlogList"/>
      </el-row>

    </div>

    <el-table
      ref="articleTable"
      :data="tableData"
      :default-sort="{prop: 'createTime', order: 'descending'}"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @sort-change="changeSort">

      <el-table-column type="selection"/>

      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column :sort-by="['oid']" label="关联BlogId" width="120" prop="oid" align="center" sortable="custom">
        <template slot-scope="scope">
          <span>{{ scope.row.oid }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标题" width="160" align="center">
        <template slot-scope="scope">
          <span style="cursor:pointer;" @click="onClick(scope.row)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="作者" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column :sort-by="['isOriginal']" label="是否原创" width="100" align="center" prop="isOriginal" sortable="custom">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isOriginal==1" type="success">原创</el-tag>
          <el-tag v-if="scope.row.isOriginal==0" type="info">转载</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="分类" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ getSortName(scope.row.blogSortUid) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="标签" width="200" align="center" >
        <template slot-scope="scope">
          <template>
            <el-tag
              v-for="(item, index) in scope.row.tagList"
              v-if="item"
              :key="index"
              style="margin-left: 3px"
              type="warning"
            >{{ item.content }}</el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column :sort-by="['level']" label="推荐等级" width="100" align="center" prop="level" sortable="custom">
        <template slot-scope="scope">
          <el-tag v-for="item in blogLevelDictList" v-if="scope.row.level == item.dictValue" :key="item.uid" :type="item.listClass">{{ item.dictLabel }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column :sort-by="['clickCount']" label="点击数" width="90" align="center" prop="clickCount" sortable="custom">
        <template slot-scope="scope">
          <span>{{ scope.row.clickCount }}</span>
        </template>
      </el-table-column>

      <el-table-column :sort-by="['isPublish']" label="发布状态" width="100" align="center" prop="isPublish" sortable="custom">
        <template slot-scope="scope">
          <template>
            <el-tag v-for="item in blogPublishDictList" v-if="scope.row.isPublish == item.dictValue" :key="item.uid" :type="item.listClass">{{ item.dictLabel }}</el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column :sort-orders="['ascending', 'descending']" label="创建时间" width="160" align="center" prop="createTime" sortable="custom">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" min-width="150">
        <template slot-scope="scope">
          <el-button v-permission="'/blog/edit'" type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button v-permission="'/blog/delete'" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--分页-->
    <div class="block">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
      fullscreen
    >
      <el-form ref="form" :model="form" :rules="rules">

        <el-row>
          <el-col :span="16">
            <el-form-item :label-width="formLabelWidth" label="标题" prop="title">
              <el-input v-model="form.title" auto-complete="off" @input="contentChange"/>
            </el-form-item>

            <el-form-item :label-width="formLabelWidth" label="简介">
              <el-input v-model="form.summary" auto-complete="off" @input="contentChange"/>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item :label-width="formLabelWidth" label="标题图">
              <div v-if="form.photoList" class="imgBody">
                <i
                  v-show="icon"
                  class="el-icon-error inputClass"
                  @click="deletePhoto()"
                  @mouseover="icon = true"
                />
                <img
                  :src="form.photoList[0]"
                  style="display:inline; width: 195px;height: 105px;"
                  @mouseover="icon = true"
                  @mouseout="icon = false"
                >
              </div>
              <div v-else class="uploadImgBody" @click="checkPhoto">
                <i class="el-icon-plus avatar-uploader-icon"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6.5">
            <el-form-item :label-width="formLabelWidth" label="分类" prop="blogSortUid">
              <el-select
                v-model="form.blogSortUid"
                size="small"
                placeholder="请选择"
                style="width:150px"
                @input="contentChange"
              >
                <el-option
                  v-for="item in wpSortData"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6.5">
            <el-form-item label="标签" label-width="80px" prop="tagUid">
              <el-select
                v-model="tagValue"
                multiple
                size="small"
                placeholder="请选择"
                style="width:210px"
                filterable
                @input="contentChange"
              >
                <el-option
                  v-for="item in tagData"
                  :key="item.uid"
                  :label="item.content"
                  :value="item.uid"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6.5">
            <el-form-item :label-width="maxLineLabelWidth" label="推荐等级" prop="level">
              <el-select v-model="form.level" size="small" placeholder="请选择" style="width:210px">
                <el-option
                  v-for="item in blogLevelDictList"
                  :key="item.uid"
                  :label="item.dictLabel"
                  :value="parseInt(item.dictValue)"
                />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="6.5">
            <el-form-item :label-width="formLabelWidth" label="是否原创" prop="isOriginal">
              <el-radio-group v-model="form.isOriginal" size="small">
                <el-radio v-for="item in blogOriginalDictList" :key="item.uid" :label="item.dictValue" border>{{ item.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="4.5">
            <el-form-item :label-width="lineLabelWidth" label="是否发布" prop="isPublish">
              <el-radio-group v-model="form.isPublish" size="small">
                <el-radio v-for="item in blogPublishDictList" :key="item.uid" :label="item.dictValue" border>{{ item.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item v-if="form.isOriginal==0" :label-width="formLabelWidth" label="作者" prop="author">
          <el-input v-model="form.author" auto-complete="off"/>
        </el-form-item>

        <el-form-item v-if="form.isOriginal==0" :label-width="formLabelWidth" label="文章出处">
          <el-input v-model="form.articlesPart" auto-complete="off"/>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="内容" prop="content">
          <CKEditor v-if="systemConfig.editorModel == '0'" ref="editor" :content="form.content" :height="360" @contentChange="contentChange"/>
          <MarkdownEditor v-if="systemConfig.editorModel == '1'" ref="editor" :content="form.content" :height="465"/>
        </el-form-item>

        <el-form-item style="float: right; margin-right: 20px;">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="localUploadVisible"
      title="本地博客上传"
    >
      <div class="tipBox">
        <div class="tip">导入须知</div>
        <div class="tipItem">1）如果你的Markdown文档里面的图片是本地，需要选择本地图片，然后提交到图片服务器</div>
        <div class="tipItem">2）含有本地图片一定需要提前上传图片，否者会出现图片无法替换的问题</div>
        <div class="tipItem">3）如果你的Markdown文档里面的图片不是本地，直接选择博客文件上传即可</div>
        <div class="tipItem">4）目前支持Markdown文件批量上传，步骤是先提交所有图片，在提交全部的博客文件</div>
        <div class="tipItem">5）因为网络或者服务器性能等不可抗拒的原因，因此不推荐一次上传太多</div>
      </div>

      <el-upload
        ref="uploadPicture"
        :data="otherData"
        :action="uploadPictureHost"
        :auto-upload="false"
        class="upload-demo2"
        name="filedatas"
        multiple
      >
        <el-button slot="trigger" size="small" type="primary">选取本地图片</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitPictureUpload">提交到图片服务器</el-button>
      </el-upload>

      <el-upload
        ref="uploadFile"
        :headers="importHeaders"
        :action="uploadAdminHost"
        :auto-upload="false"
        class="upload-demo"
        name="filedatas"
        multiple
      >
        <el-button slot="trigger" size="small" type="primary">选取博客文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交到服务器</el-button>
      </el-upload>

    </el-dialog>

    <CheckPhoto
      v-if="!isFirstPhotoVisible"
      :photo-visible="photoVisible"
      :photos="photoList"
      :files="fileIds"
      :limit="1"
      @choose_data="getChooseData"
      @cancelModel="cancelModel"
    />

    <SubjectSelect v-if="!isFirstSubjectVisible" :subject-visible="subjectVisible" @cancelModel="cancelSubjectSelect" @selectData="getSelectData"/>

    <!-- 添加或修改对话框 -->
    <el-dialog :visible.sync="syncWpUpFormVisible" title="批量设置Wordpress分类">
      <el-form ref="formWpUp" :model="formWpUp" :rules="rules">
        <el-form-item :label-width="formLabelWidth" label="分类" prop="blogSortUid">
          <el-select
            v-model="formWpUp.blogSortUid"
            size="small"
            placeholder="请选择"
            style="width:150px"
          >
            <el-option
              v-for="item in wpSortData"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="syncWpUpFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlePathSort">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBlogList, addBlog, editBlog, deleteBlog, deleteBatchBlog, editBatchBlog, uploadWordpressBlog } from '@/api/blogSpider'
import { getSystemConfig } from '@/api/systemConfig'
import { getTagList } from '@/api/tag'
import { getBlogSortList } from '@/api/blogSort'
import { formatData } from '@/utils/webUtils'
import { getToken } from '@/utils/auth'
import { setCookie, getCookie, delCookie } from '@/utils/cookieUtils'
import { getListByDictTypeList } from '@/api/sysDictData'
import { addSubjectItemList } from '@/api/subjectItem'

import CheckPhoto from '../../components/CheckPhoto'
import CKEditor from '../../components/CKEditor'
import MarkdownEditor from '../../components/MarkdownEditor'
import SubjectSelect from '../../components/SubjectSelect'
var querystring = require('querystring')
import { Loading } from 'element-ui'
import {
  getBlogWpSortList
} from '@/api/qrcode'
export default {
  components: {
    CheckPhoto,
    CKEditor,
    MarkdownEditor,
    SubjectSelect
  },
  data() {
    return {
      uploadPictureHost: process.env.PICTURE_API + '/file/pictures',
      uploadAdminHost: process.env.ADMIN_API + '/blog/uploadLocalBlog',
      importHeaders: {
        Authorization: getToken()
      },
      otherData: {
        source: 'picture',
        userUid: 'uid00000000000000000000000000000000',
        adminUid: 'uid00000000000000000000000000000000',
        projectName: 'blog',
        sortName: 'admin',
        token: getToken()
      },
      wpSortData: [
        {
          Id: 10,
          Name: '编程开发'
        },
        {
          Id: 72,
          Name: 'python/机器&深度学习'
        }
      ],
      queryParams: {
        keyword: '',
        tagKeyword: '', // 标签搜索
        sortKeyword: '', // 分类搜索
        levelKeyword: '', // 等级搜索
        publishKeyword: '', // 发布 搜索
        originalKeyword: '', // 原创 搜索
        typeKeyword: '' // 文章类型
      }, // 搜索条件
      showSearch: null, // 显示搜索条件
      pictureList: [], // 上传的图片列表
      BLOG_WEB_URL: process.env.BLOG_WEB_URL,
      multipleSelection: [], // 多选，用于批量删除
      tagOptions: [], // 标签候选框
      sortOptions: [], // 分类候选框
      loading: false, // 搜索框加载状态
      uploadLoading: null, // 文件上传loading
      CKEditorData: null,
      tableData: [], // 博客数据
      tagData: [], // 标签数据
      tagValue: [], // 保存选中标签id(编辑时)
      blogSortData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0, // 总数量
      title: '增加博客',
      dialogFormVisible: false, // 控制弹出框
      subjectVisible: false, // 是否显示专题
      isFirstSubjectVisible: true, // 专题选择器是否首次显示【用于懒加载】
      formLabelWidth: '120px',
      lineLabelWidth: '120px', // 一行的间隔数
      maxLineLabelWidth: '100px',
      isEditForm: false,
      photoVisible: false, // 控制图片选择器的显示
      isFirstPhotoVisible: true, // 图片选择器是否首次显示【用于懒加载】
      photoList: [],
      fileIds: '',
      icon: false, // 控制删除图标的显示
      interval: null, // 定义触发器
      isChange: false, // 表单内容是否改变
      changeCount: 0, // 改变计数器
      blogOriginalDictList: [], // 存储区域字典
      blogPublishDictList: [], // 是否字典
      blogLevelDictList: [], // 博客推荐等级字典
      openDictList: [], // 是否启动字典
      blogTypeDictList: [], // 文章类型字典
      blogOriginalDefault: null, // 博客原创默认值
      blogLevelDefault: null, // 博客等级默认值
      blogPublishDefault: null, // 博客发布默认值
      openDefault: null, // 是否开启评论默认值
      blogTypeDefault: null, // 文章类型默认值
      fileList: [],
      localUploadVisible: false,
      systemConfig: {}, // 系统配置
      orderByDescColumn: '', // 降序字段
      orderByAscColumn: '', // 升序字段
      syncWpUpFormVisible: false, // 更新WP-UP
      form: {
        uid: null,
        title: null,
        summary: null,
        content: null,
        tagUid: null,
        fileUid: null,
        isOriginal: null, // 是否原创
        isPublish: null,
        author: null, // 作者
        clickCount: 0,
        articlesPart: null // 文章出处
      },
      formWpUp: {
        blogSortUid: null
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        blogSortUid: [
          { required: true, message: '分类不能为空', trigger: 'blur' }
        ],
        tagUid: [
          { required: true, message: '标签不能为空', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '推荐等级不能为空', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '推荐等级只能为自然数' }
        ],
        isPublish: [
          { required: true, message: '发布字段不能为空', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '发布字段只能为自然数' }
        ],
        isOriginal: [
          { required: true, message: '原创字段不能为空', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, message: '原创字段只能为自然数' }
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    getSortName() {
      return function(n) {
        var result = ''
        for (var i = 0; i < this.wpSortData.length; i++) {
          if (this.wpSortData[i].Id === parseInt(n)) {
            result = this.wpSortData[i].Name
            break
          }
        }
        return result
      }
    }
  },
  created() {
    // 从dashboard传递过来的 tagUid 以及 blogSortUid
    const tempTag = this.$route.query.tag
    const tempBlogSort = this.$route.query.blogSort

    if (tempTag != undefined) {
      this.tagRemoteMethod(tempTag.name)
      this.queryParams.tagKeyword = tempTag.tagUid
    }
    if (tempBlogSort != undefined) {
      this.sortRemoteMethod(tempBlogSort.name)
      this.queryParams.sortKeyword = tempBlogSort.blogSortUid
    }
    // 判断是否需要展开条件查询
    this.getShowSearch()

    // 获取系统配置
    this.getSystemConfigList()

    // 获取字典
    this.getDictList()

    // 获取标签列表
    this.tagList()
    // 获取博客分类
    this.blogSortList()
    this.wpSortList()
    // 获取博客列表
    this.blogList()
  },
  methods: {
    /**
     * 同步到wordpress中
     */
    handleUpWp: function() {
      var params = {}
      params.keyword = this.keyword
      params.pageSize = this.pageSize
      params.currentPage = this.currentPage
      uploadWordpressBlog(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.$commonUtil.message.success(response.message)
        }
      })
      // this.$commonUtil.message.success('生成小程序二维码')
      // console.log('生成小程序二维码')
    },
    wpSortList: function() {
      var blogSortParams = {}
      blogSortParams.pageSize = 500
      blogSortParams.currentPage = 1
      getBlogWpSortList(blogSortParams).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.wpSortData = response.data.records
        }
      })
    },
    // 从后台获取数据,重新排序
    changeSort(val) {
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
      if (val.order == 'ascending') {
        this.orderByAscColumn = val.prop
        this.orderByDescColumn = ''
      } else {
        this.orderByAscColumn = ''
        this.orderByDescColumn = val.prop
      }
      this.blogList()
    },
    openLoading() {
      this.uploadLoading = Loading.service({
        lock: true,
        text: '正在努力上传中……'
      })
    },
    closeLoading() {
      this.uploadLoading.close()
    },
    // 判断是否需要展开条件查询
    getShowSearch: function() {
      const showSearch = getCookie('showSearch')
      if (showSearch == 'false') { // 此时的hasAuth是true
        this.showSearch = false
      } else {
        this.showSearch = true
      }
    },
    tagList: function() {
      var tagParams = {}
      tagParams.pageSize = 500
      tagParams.currentPage = 1
      getTagList(tagParams).then(response => {
        this.tagData = response.data.records
        this.tagOptions = response.data.records
      })
    },
    blogSortList: function() {
      var blogSortParams = {}
      blogSortParams.pageSize = 500
      blogSortParams.currentPage = 1
      getBlogSortList(blogSortParams).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.blogSortData = response.data.records
          this.sortOptions = response.data.records
        }
      })
    },
    resetBlogList: function() {
      this.queryParams = {}
      this.blogList()
    },
    blogList: function() {
      var params = {}
      params.keyword = this.queryParams.keyword
      params.blogSortUid = this.queryParams.sortKeyword
      params.tagUid = this.queryParams.tagKeyword
      params.levelKeyword = this.queryParams.levelKeyword
      params.isPublish = this.queryParams.publishKeyword
      params.isOriginal = this.queryParams.originalKeyword
      params.currentPage = this.currentPage
      params.pageSize = this.pageSize
      params.orderByDescColumn = this.orderByDescColumn
      params.orderByAscColumn = this.orderByAscColumn
      getBlogList(params).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.tableData = response.data.records
          this.currentPage = response.data.current
          this.pageSize = response.data.size
          this.total = response.data.total
        }
      })
    },
    /**
     * 字典查询
     */
    getDictList: function() {
      var dictTypeList = ['sys_recommend_level', 'sys_original_status', 'sys_publish_status', 'sys_normal_disable', 'sys_blog_type']

      getListByDictTypeList(dictTypeList).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          var dictMap = response.data
          this.blogOriginalDictList = dictMap.sys_original_status.list
          this.blogPublishDictList = dictMap.sys_publish_status.list
          this.blogLevelDictList = dictMap.sys_recommend_level.list
          this.openDictList = dictMap.sys_normal_disable.list
          this.blogTypeDictList = dictMap.sys_blog_type.list

          if (dictMap.sys_original_status.defaultValue) {
            this.blogOriginalDefault = dictMap.sys_original_status.defaultValue
          }
          if (dictMap.sys_publish_status.defaultValue) {
            this.blogPublishDefault = dictMap.sys_publish_status.defaultValue
          }
          if (dictMap.sys_recommend_level.defaultValue) {
            this.blogLevelDefault = dictMap.sys_recommend_level.defaultValue
          }
          if (dictMap.sys_normal_disable.defaultValue) {
            this.openDefault = dictMap.sys_normal_disable.defaultValue
          }
          if (dictMap.sys_blog_type.defaultValue) {
            this.blogTypeDefault = dictMap.sys_blog_type.defaultValue
          }
        }
      })
    },
    getFormObject: function() {
      var formObject = {
        uid: null,
        title: null,
        summary: null,
        content: null,
        tagUid: null,
        fileUid: null,
        isOriginal: this.blogOriginalDefault, // 是否原创
        isPublish: this.blogOriginalDefault, // 是否发布
        author: null, // 作者
        level: parseInt(this.blogLevelDefault), // 推荐等级，默认是正常
        articlesPart: null // 文章出处，默认蘑菇博客
      }
      return formObject
    },
    // 跳转到该博客详情
    onClick: function(row) {
      if (row.isPublish == 0) {
        this.$message.error('文章暂未发布，无法进行浏览')
        return
      }
      window.open(this.BLOG_WEB_URL + '/#/info?blogOid=' + row.oid)
    },
    // 标签远程搜索函数
    tagRemoteMethod: function(query) {
      if (query !== '') {
        var params = {}
        params.keyword = query
        params.pageSize = 10
        params.currentPage = 1
        getTagList(params).then(response => {
          this.tagOptions = response.data.records
        })
      } else {
        this.tagOptions = []
      }
    },
    // 分类远程搜索函数
    sortRemoteMethod: function(query) {
      if (query !== '') {
        var params = {}
        params.keyword = query
        params.pageSize = 10
        params.currentPage = 1
        getBlogSortList(params).then(response => {
          this.sortOptions = response.data.records
        })
      } else {
        this.sortOptions = []
      }
    },
    // 获取系统配置
    getSystemConfigList: function() {
      getSystemConfig().then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          if (response.data) {
            this.systemConfig = response.data
          }
        }
      })
    },
    getChooseData(data) {
      var that = this
      this.photoVisible = false
      this.photoList = data.photoList
      this.fileIds = data.fileIds
      var fileId = this.fileIds.replace(',', '')
      if (this.photoList.length >= 1) {
        this.form.fileUid = fileId
        this.form.photoList = this.photoList
      }
    },
    // 关闭模态框
    cancelModel() {
      this.photoVisible = false
    },
    deletePhoto: function() {
      this.form.photoList = null
      this.form.fileUid = ''
    },
    checkPhoto() {
      this.photoList = []
      this.fileIds = ''
      this.photoVisible = true
      this.isFirstPhotoVisible = false
    },
    submitStr: function(str, index) {
      if (str.length > index) {
        return str.slice(0, index) + '...'
      }
      return str
    },
    // 添加至专题
    handleSubject() {
      if (this.multipleSelection.length <= 0) {
        this.$commonUtil.message.error('请先选中需要添加到专题的博客!')
        return
      }
      this.subjectVisible = true
      this.isFirstSubjectVisible = false
    },
    getSelectData(subjectUid) {
      this.cancelSubjectSelect()
      // 选中的博客
      const multipleSelection = this.multipleSelection
      const subjectItemList = []
      for (let a = 0; a < multipleSelection.length; a++) {
        const params = {}
        params.subjectUid = subjectUid[0]
        params.blogUid = multipleSelection[a].uid
        subjectItemList.push(params)
      }
      addSubjectItemList(subjectItemList).then(response => {
        if (response.code == this.$ECode.SUCCESS) {
          this.$commonUtil.message.success(response.message)
          // 清空选中列表
          this.multipleSelection = []
          this.$refs.articleTable.clearSelection()
        } else {
          this.$commonUtil.message.error(response.message)
        }
      })
    },
    cancelSubjectSelect: function() {
      this.subjectVisible = false
    },
    // 关闭窗口
    closeDialog(done) {
      if (this.isChange) {
        this.$confirm('是否关闭博客编辑窗口', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.isChange = false
            this.changeCount = 0
            done()
          })
          .catch(() => {
            this.$commonUtil.message.info('已取消')
          })
      } else {
        this.isChange = false
        this.changeCount = 0
        done()
      }
    },
    handleFind: function() {
      this.currentPage = 1
      this.blogList()
    },
    handleAdd: function() {
      this.title = '增加博客'
      const that = this
      let tempForm = null
      if (window.LS.get('form')) {
        tempForm = JSON.parse(window.LS.get('form'))
      }
      if (tempForm != null && tempForm.title != null && tempForm.title != '') {
        this.$confirm('还有上次未完成的博客编辑，是否继续编辑?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            that.dialogFormVisible = true
            that.tagValue = []
            that.form = JSON.parse(window.LS.get('form'))

            console.log('获取标签列表', that.form)

            var tagValue = that.form.tagUid.split(',')
            for (var a = 0; a < tagValue.length; a++) {
              if (tagValue[a] != null && tagValue[a] != '') {
                that.tagValue.push(tagValue[a])
              }
            }
            console.log('获取标签列表', that.tagValue)

            if (that.form.uid) {
              that.title = '编辑博客'
              that.isEditForm = true
            } else {
              that.title = '新增博客'
              that.isEditForm = false
            }
          })
          .catch(() => {
            that.dialogFormVisible = true
            that.form = that.getFormObject()
            that.$nextTick(() => {
              // DOM现在更新了
              that.$refs.editor.initData() // 设置富文本内容
            })
            that.tagValue = []
            that.isEditForm = false
            that.title = '新增博客'
            window.LS.remove('form')
          })
      } else {
        that.dialogFormVisible = true
        that.form = this.getFormObject()
        that.$nextTick(() => {
          // 初始化内容
          that.$refs.editor.initData()
        })
        that.tagValue = []
        that.isEditForm = false
      }
    },
    handleUpload: function() {
      this.localUploadVisible = true
    },
    // 文件上传
    submitUpload() {
      const { uploadFiles, action } = this.$refs.uploadFile
      const data = {}
      data.pictureList = JSON.stringify(this.pictureList)
      this.openLoading()
      this.uploadFiles({
        uploadFiles,
        data,
        action,
        success: (response) => {
          const res = JSON.parse(response)
          if (res.code == this.$ECode.SUCCESS) {
            this.$commonUtil.message.success(res.message)
            // 获取博客列表
            this.blogList()
          } else {
            this.$commonUtil.message.error(res.message)
          }
          this.localUploadVisible = false
          this.closeLoading()
          // 上传成功后，将里面的内容删除
          this.$refs.uploadFile.clearFiles()
          this.$refs.uploadPicture.clearFiles()
        },
        error: (error) => {
          this.closeLoading()
          console.log('失败了', error)
        }
      })
    },
    // 图片上传
    submitPictureUpload() {
      const { uploadFiles, action, data } = this.$refs.uploadPicture
      this.openLoading()
      this.uploadFiles({
        uploadFiles,
        data,
        action,
        success: (response) => {
          const res = JSON.parse(response)
          if (res.code == this.$ECode.SUCCESS) {
            this.$commonUtil.message.success('图片上传成功')
            const pictureList = res.data
            const list = []
            for (let a = 0; a < pictureList.length; a++) {
              const picture = {}
              picture.uid = pictureList[a].uid
              picture.fileOldName = pictureList[a].fileOldName
              picture.picUrl = pictureList[a].picUrl
              picture.qiNiuUrl = pictureList[a].qiNiuUrl
              picture.minioUrl = pictureList[a].minioUrl
              list.push(picture)
            }
            this.pictureList = list
          }
          this.closeLoading()
        },
        error: (error) => console.log('失败了', error)
      })
    },
    /**
     * 自定义上传文件
     * @param fileList 文件列表
     * @param data 上传时附带的额外参数
     * @param url 上传的URL地址
     * @param success 成功回调
     * @param error 失败回调
     */
    uploadFiles({ uploadFiles, headers, data, action, success, error }) {
      const form = new FormData()
      // 文件对象
      uploadFiles.map(file => form.append('filedatas', file.raw))
      // 附件参数
      for (const key in data) {
        form.append(key, data[key])
      }
      const xhr = new XMLHttpRequest()
      // 异步请求
      xhr.open('post', action, true)
      // 设置请求头
      xhr.setRequestHeader('Authorization', getToken())
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            success && success(xhr.responseText)
          } else {
            error && error(xhr.status)
          }
        }
      }
      xhr.send(form)
    },
    handleSyncWpUp: function() {
      if (this.multipleSelection.length <= 0) {
        this.$commonUtil.message.error('请先选中需要分类的博客')
        return
      }
      this.syncWpUpFormVisible = true
    },
    handlePathSort: function() {
      if (this.multipleSelection.length <= 0) {
        this.$commonUtil.message.error('请先选中需要分类的博客')
        return
      }
      var that = this
      this.$refs.formWpUp.validate((valid) => {
        if (!valid) {
          console.log('校验出错')
        } else {
          // 更新
          var blogSpiderParams = {}
          blogSpiderParams.blogSortUid = this.formWpUp.blogSortUid.toString()
          blogSpiderParams.blogSpiderList = this.multipleSelection
          editBatchBlog(blogSpiderParams).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              that.$commonUtil.message.success(response.message)
            }
          })
        }
      })
    },
    handleDownload: function() {
      if (this.multipleSelection.length <= 0) {
        this.$commonUtil.message.error('请先选中需要导出的博客')
        return
      }

      const blogList = this.multipleSelection
      for (let a = 0; a < blogList.length; a++) {
        this.$commonUtil.htmlToMarkdownFile(blogList[a].title, blogList[a].content)
      }
    },
    // 内容改变，触发监听
    contentChange: function() {
      var that = this
      if (that.changeCount > 1) {
        that.isChange = true
        that.form.content = that.$refs.editor.getData() // 获取CKEditor中的内容
        that.form.tagUid = that.tagValue.join(',')
        console.log('开始备份2', that.$refs.editor.getData())
        console.log('开始备份2', that.tagValue)
        console.log('开始备份3', that.form)
        // 将内容设置到 WebStorage中
        window.LS.set('form', JSON.stringify(that.form))
      }
      this.changeCount = this.changeCount + 1
    },
    handleEdit: function(row) {
      var that = this
      let tempForm = null
      if (window.LS.get('form')) {
        tempForm = JSON.parse(window.LS.get('form'))
      }
      if (tempForm != null && tempForm.title != null && tempForm.title != '') {
        this.$confirm('还有上次未完成的博客编辑，是否继续编辑?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            that.dialogFormVisible = true
            that.tagValue = []
            that.form = JSON.parse(window.LS.get('form'))
            var tagValue = that.form.tagUid.split(',')
            for (var a = 0; a < tagValue.length; a++) {
              if (tagValue[a] != null && tagValue[a] != '') {
                that.tagValue.push(tagValue[a])
              }
            }
            if (that.form.uid) {
              that.title = '编辑博客'
              that.isEditForm = true
            } else {
              that.title = '新增博客'
              that.isEditForm = false
            }
          })
          .catch(() => {
            this.title = '编辑博客'
            this.form = row
            this.$nextTick(() => {
              // DOM现在更新了
              that.$refs.editor.setData(that.form.content) // 设置富文本内容
            })
            that.tagValue = []
            if (row.tagList) {
              var json = row.tagList
              for (var i = 0, l = json.length; i < l; i++) {
                if (json[i] != null) {
                  that.tagValue.push(json[i]['uid'])
                }
              }
            }
            that.dialogFormVisible = true
            that.isEditForm = true
            window.LS.remove('form')
          })
      } else {
        this.title = '编辑博客'
        this.form = row
        this.$nextTick(() => {
          // DOM现在更新了
          that.$refs.editor.setData(that.form.content) // 设置富文本内容
        })
        that.tagValue = []
        if (row.tagList) {
          var json = row.tagList
          for (var i = 0, l = json.length; i < l; i++) {
            if (json[i] != null) {
              that.tagValue.push(json[i]['uid'])
            }
          }
        }
        that.dialogFormVisible = true
        that.isEditForm = true
      }
    },
    handleDelete: function(row) {
      var that = this
      this.$confirm('此操作将把博客删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var params = {}
          params.uid = row.uid
          deleteBlog(params).then(response => {
            that.$commonUtil.message.success(response.message)
            that.blogList()
          })
        })
        .catch(() => {
          that.$commonUtil.message.info('已取消删除')
        })
    },
    handleDeleteBatch: function(row) {
      var that = this
      if (that.multipleSelection.length <= 0) {
        that.$commonUtil.message.error('请先选中需要删除的博客')
        return
      }
      this.$confirm('此操作将把选中博客删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteBatchBlog(that.multipleSelection).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              that.$commonUtil.message.success(response.message)
              that.blogList()
            } else {
              that.$commonUtil.message.error(response.message)
            }
          })
        })
        .catch(() => {
          that.$commonUtil.message.info('已取消删除')
        })
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.blogList()
    },
    submitForm: function() {
      this.form.content = this.$refs.editor.getData() // 获取CKEditor中的内容
      this.form.tagUid = this.tagValue.join(',')
	    this.form.blogSortUid = (this.form.blogSortUid).toString()
      this.$refs.form.validate((valid) => {
        if (!valid) {
          console.log('校验出错')
        } else {
          const params = formatData(this.form)
          if (this.isEditForm) {
            editBlog(this.form).then(response => {
              if (response.code == this.$ECode.SUCCESS) {
                this.$commonUtil.message.success(response.message)
                // 清空LocalStorage中的内容
                window.LS.remove('form')
                this.dialogFormVisible = false
                this.blogList()
              } else {
                this.$commonUtil.message.error(response.message)
              }
            })
          } else {
            addBlog(this.form).then(response => {
              if (response.code == this.$ECode.SUCCESS) {
                this.$commonUtil.message.success(response.message)
                // 清空cookie中的内容
                window.LS.remove('form')
                this.dialogFormVisible = false
                this.blogList()
              } else {
                this.$commonUtil.message.error(response.message)
              }
            })
          }
        }
      })
    },
    // 改变多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>
<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin: 0, 0, 0, 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width:  195px;
  height: 105px;
  line-height: 105px;
  text-align: center;
}
.imgBody {
  width:  195px;
  height: 105px;
  border: solid 2px #ffffff;
  float: left;
  position: relative;
}
.uploadImgBody {
  margin-left: 5px;
  width:  195px;
  height: 105px;
  border: dashed 1px #c0c0c0;
  float: left;
  position: relative;
}
.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}
.inputClass {
  position: absolute;
}
.el-dialog__body {
  padding-top: 10px;
  padding-bottom: 0px;
}
.el-dialog {
  min-height: 400px;
}
.el-upload__tip {
  margin-top: 10px;
  margin-left: 10px;
  color: #3e999f;
}

.upload-demo {
  margin-top: 50px;
}
.tipBox {
  margin-bottom: 30px;
}
.tip {
  font-size: 14px;
  font-weight: bold;
  color: 	#808080;
}
.tipItem {
  line-height: 22px;
  color: 	#A9A9A9;
}
</style>
